<!--  -->
<template>
  <div class="infro">
    <div class="gs">
      <div class="prto" v-for="card in cards" :key="card.index">
        <div class="lef">
          <ul class="leful">
            <li>{{ card.tile }}</li>
            <li>{{ card.num }}</li>
            <li>累计量</li>
          </ul>
        </div>
        <div class="rgt">
          <ul class="rgtul">
            <li>{{ card.nums }}</li>
            <li>今日</li>
          </ul>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      cards: [
        {
          tile: '粉丝数（人）',
          num: '1340',
          tex: '累计量',
          nums: '40',
          txt: '今日',
        },
        {
          tile: '浏览量（次）',
          num: '9340',
          tex: '累计量',
          nums: '40',
          txt: '今日',
        },
        {
          tile: '关注量（次）',
          num: '1340',
          tex: '累计量',
          nums: '40',
          txt: '今日',
        },
        {
          tile: '分享量（次）',
          num: '120',
          tex: '累计量',
          nums: '0',
          txt: '今日',
        },
      ],
    }
  },
  created() {},
  methods: {},
  beforeDestroy() {},
}
</script>

<style lang='scss' scoped>
.infro {
  width: 100%;
  height: auto;

  .gs {
    width: 100%;
    height: auto;
    display: flex;
    div:nth-child(4){
      border-right: 0;
    }
    .prto {
      width: 25%;
      height: 135px;
      display: flex;
      justify-content: space-between;
      border-right: 2px solid #c4c4c4;
      margin: 12.5px 0;
     
      .lef {
        width: 85px;
        height: 135px;
        margin: 21px 71px 0px 30px;
        display: flex;
        .leful {
          width: 100%;
          height: auto;
          text-align: left;

          li:nth-child(1) {
            width: 85px;
            height: 22px;
            margin-bottom: 27px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;

            color: rgba(0, 0, 0, 0.75);
          }
          li:nth-child(2) {
            width: 85px;
            height: 38px;
            margin-bottom: 3px;
            color: #4a4a4a;
            font-family: PingFangSC, PingFangSC-Regular;
            font-size: 24px;
          }
          li:nth-child(3) {
            width: 37px;
            height: 34px;
            margin-bottom: 25px;
            opacity: 0.5;
            font-size: 12px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            text-align: left;
            color: #0f1b41;
            line-height: 24px;
          }
        }
      }
      .rgt {
        width: 100%;
        height: 65px;
        margin-top: 70px;
        .rgtul {
          width: 100%;

          height: 65px;
          text-align: left;
          li:nth-child(1) {
            margin-bottom: 3px;
            width: 85px;
            height: 38px;
            color: #4a4a4a;
             font-size: 24px;
          }
          li:nth-child(2) {
            margin-bottom: 25px;
           
            width: 24px;
            height: 24px;
            opacity: 0.5;
            font-size: 12px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            text-align: left;
            color: #0f1b41;
            line-height: 24px;
          }
        }
      }
    }
  }
}
</style>
